<template>
  <!-- 头部查询区域 -->
  <el-header class="el-header">
   <div class="left-panel">
      <el-button type="warning" plain @click="getExportData">导出</el-button>
	  <el-popconfirm
          confirm-button-text="确认"
          cancel-button-text="取消"
          icon-color="#C00000"
          title="确认已收?"
          @confirm="confirmEvent"
        >
          <template #reference>
            <el-button type="success" plain>
              <el-icon><el-icon-select /></el-icon>
              <span>材料已收</span>
            </el-button>
          </template>
        </el-popconfirm>
    </div>
    <div class="right-panel">
      <div class="right-panel-search">
        <div class="mt-4">
            <el-input
              v-model="queryInfo.query"
              placeholder="查询内容"
              class="input-with-select"
			  clearable
			  @clear="allData"
            >
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                   <el-option label="姓名" value="姓名" />
                  <el-option label="年龄" value="年龄" />
                  <el-option label="应征地" value="应征地" />
                  <el-option label="身份证号" value="身份证号" />
                  <el-option label="文化程度" value="文化程度" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
				  @click="searchPeople"
                ></el-button>
              </template>
            </el-input>
          </div>
        <!-- <el-popconfirm
          confirm-button-text="确认"
          cancel-button-text="取消"
          icon-color="#C00000"
          title="确认已收?"
          @confirm="confirmEvent"
        >
          <template #reference>
            <el-button type="success" plain>
              <el-icon><el-icon-select /></el-icon>
              <span>材料已收</span>
            </el-button>
          </template>
        </el-popconfirm> -->
      </div>
    </div>
  </el-header>
  <!-- 两个按钮 -->
    <Button :columns="state.columns"></Button>
  <!-- 数据表单 -->
  <el-table
    ref="tableRef"
    :data="state.nowAllList"
    stripe
    :header-cell-style="{ color: '#666', 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }"
    :fit="true"
    style="width: 100%; font-size: 14px"
    ooltip-effect="dark"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" />
    <el-table-column prop="name" label="姓名" v-if="state.columns[0].show" />
    <el-table-column
      label="身份证号"
      prop="idCard"
      v-if="state.columns[1].show"
    />
    <el-table-column
      label="年龄"
      prop="age"
      v-if="state.columns[2].show"
      sortable="true"
    />
    <el-table-column
      label="文化程度"
      prop="cultureStandard"
      v-if="state.columns[3].show"
      width="168"
    />
    <el-table-column
      label="应征地"
      prop="bingyiPlace"
      v-if="state.columns[4].show"
    />
    <el-table-column
      label="纸质回收状态"
      prop="paperStatus"
      v-if="state.columns[5].show"
    />
  </el-table>
  <!-- 分页区开始 -->
  <div class="page">
    <el-pagination
      v-model:currentPage="queryInfo.pagenum"
      v-model:page-size="queryInfo.pagesize"
      :page-sizes="[10, 20,25,30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 分页区结束 -->
</template>


<script setup>
import {
  getAllData,
  searchData,
  recMaterial,
  deriveData,
} from "@/api/politics/unReceivedMaterial";
import { ElMessage } from "element-plus";
import Button from "@/components/commom/Button";
import { reactive, onMounted ,watch, ref} from "vue";
let multipleSelection = reactive([]);
let selectField  = ref('')
// 获取页面数据
const allData = async function () {
  const getAllDataRes = await getAllData.get();
  state.allList = getAllDataRes.data;
  queryInfo.total = getAllDataRes.data.length;
  getPageData();
};

// 实现分页效果
const getPageData = function () {
  let start = (queryInfo.pagenum - 1) * queryInfo.pagesize;
  let end = start + queryInfo.pagesize;
  state.nowAllList = state.allList.slice(start, end);
};

// 分页存储改变大小触发该事件
const handleSizeChange = function (newSize) {
  queryInfo.pagesize = newSize;
  allData();
};

// 分页发生变化触发该事件
const handleCurrentChange = function (newPage) {
  queryInfo.pagenum = newPage;
  allData();
};

// 根据姓名查找功能
const searchPeople = async function () {
  if (!queryInfo.query) {
    allData();
    return;
  }
  const search = await searchData.post(`?name=${queryInfo.query}`);
  if (queryInfo.query) {
    console.log(search);
    console.log(search.data);
    state.nowAllList = search.data;
    ElMessage({
      message: search.msg,
      type: "success",
    });
  }
  if (!search.data) {
    ElMessage({
      message: search.msg,
      type: "error",
    });
    allData();
  }
};
// 多选框选中获取该信息
const handleSelectionChange = function (val) {
  multipleSelection = [];
  console.log(val);
  val.forEach((item) => {
    multipleSelection.push(item.poliInfoId);
  });
  console.log(multipleSelection);
};

// 确认材料已收功能
const confirmEvent = async function () {
  const taskRes = await recMaterial.post(
    `?poliInfoId=${multipleSelection.join("&poliInfoId=")}`
  );
  console.log(taskRes);
  if (taskRes.code !== 200) {
    return ElMessage.error(taskRes.msg);
  } else {
    ElMessage({
      message: taskRes.msg,
      type: "success",
    });
    allData();
  }
};
onMounted(() => {
  allData();
});

// 导出功能
const getExportData = function () {
  window.location.href = deriveData.url;
};
const state = reactive({
  // 高级查询
  fiexdSearchForm: false,
  columns: [
    { name: "姓名:", show: true, prop: "name" },
    { name: "身份证号", show: true, prop: "idCard" },
    { name: "年龄", show: true, prop: "age" },
    { name: "文化程度", show: true, prop: "cultureStandard" },
    { name: "应征地", show: true, prop: "bingyiPlace" },
    { name: "纸质材料回收状态", show: true, prop: "paperStatus" },
  ],
  // 所有数据
  allList: [],
  // 页面显示的数据
  nowAllList: [],
});
// 获取用户列表的参数对象
const queryInfo = reactive({
  query: "",
  //当前页数
  pagenum: 1,
  //当前每页显示多少条数据
  pagesize: 10,
  // 总数
  total: 0,
});
watch(queryInfo, (queryInfo) => {
  if (queryInfo.query === "") {
    searchPeople();
  }
});
</script>

<style scoped>
.left-panle {
  display: flex;
  align-items: center;
  width: 380px;
  justify-content: space-around;
}
.right-panle {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
  width: 720px;
}
.btn1 {
  margin-left: 20px;
}

.el-table {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 10px;
}
.allbtn {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 5px;
}
.el-descriptions-item {
  margin-bottom: 1000px;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.checkboxCss {
  display: flex;
  flex-direction: column;
}
.btnModel {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 30px;
  /* margin-right: 5px; */
}
.left-panle {
  display: flex;
  align-items: center;
  width: 380px;
  justify-content: space-around;
}
.right-panle {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
  width: 720px;
}
.btn1 {
  margin-left: 20px;
}
.el-header {
	display: flex;
	justify-content: space-between;
}
</style>
